<template>

	<view style="height: 500px;">
		<view class="contents" >
			<view class="uni-flex uni-row">
			   <view class="flex-item uni-bg-red color">
				   <scroll-view scroll-x scroll-y="true" class="navscroll">
					   <view style="height: 10px;"></view>
					   <input class="user-input" type="text" name="search" placeholder="请输入商品名称" @click="toSearch()">
				   	<view class="item" 
				   	:class="indexs==navIndex ? 'active' : ''" v-for="(item,indexs) in navArr" 
				   	@click="clickNav1(indexs,item.id)"
				   	:key="item.id"
				   	>{{item.cateTitle}}</view>			
				   </scroll-view>
			   </view>
			   
			</view>
			   <view class="" style="display:flex">
			                  <view>
								  <div class="iocn_div">
									  <scroll-view  scroll-y="true" class="navscroll2" >
										<view class="item" 
									  	:class="index==navIndex ? 'active' : ''" v-for="(item,index) in navArrItem" 
									  	@click="clickNav2(index,item.id,item.cateTitle)"
									  	:key="item.pid"
									  	>
									  	<image :src="item.imgUrl" mode="aspectFill"></image>
										<br> 
										{{item.cateTitle}}
										</view>			
									  </scroll-view>
								  </div>
							  </view>
							  
			                  <view>
								   <view  style="width:100% ; height: 100px;"></view>
								  <div class="shop_row" v-for="items in newsArr" :key="items.id">
								  <newshop :item="items" @click.native="goDetail(items)"></newshop>
								  </div>
							  </view>
			              </view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				navIndex:0,
				navindexID:0,
				// 导航栏内容 例：国内  国际  体育等等
				navArr:[],
				navArrItem:[],
				newsArr:[
					{
						author:"陈业",
						id:"251",
						title:"香港恒大中心再次放售 李嘉诚旗下长实集团仍有机会",
						posttime:"1664174668",
						goodsLogo:"http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20220926/1664178169.jpg",
						classid:"50",
						hits:"7674"
					
					},
					{
						author:"陈业",
						id:"251",
						title:"香港恒大中心再次放售 李嘉诚旗下长实集团仍有机会",
						posttime:"1664174668",
						goodsLogo:"http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20220926/1664178169.jpg",
						classid:"50",
						hits:"7674"
					},
				],
			}
		},
		// 页面加载执行方法
		onLoad() {
			this.getIdeaData();
			this.clickNav1(0,0);
			this.navArr=[{
					id:"0",
					imgUrl:"http://qingnian8.oss-cn-qingdao.aliyuncs.com/images/20220926/1664178169.jpg",
					cateTitle:"全部"
					},]
			this.navChang();
		},
		methods: {
			navChang(){
				this.newsArr=[]
				uni.request({
					// url:"http://localhost:8009/shop/getgoodsCates",
					url:"http://107.151.197.197:8009/shop/getgoodsCates",
					data:{
						type:0,
						state:0
					},
					success:res=>{
						// //console.log(res)
						// //console.log("111111111111")
						// //console.log(res.data)
						// //console.log("2222222222222222")
						// //console.log(res.data.data.goodsCates)
						this.navArr=[...this.navArr,...res.data.data.goodsCates]
						// //console.log("显示查询到的数据--- one")
						// //console.log(this.navArrItem)
					}
				})
			},
			clickNav1(index,id){
				this.navIndex=index;
				this.navArrItem=[]
				this.newsArr=[]
				
				uni.request({
					//url:"http://localhost:8009/shop/getgoodsCates",
					url:"http://107.151.197.197:8009/shop/getgoodsCates",
					data:{
						type:id,
						state:1
					},
					success:res=>{
						// //console.log(res)
						// //console.log("111111111111")
						// //console.log(res.data)
						console.log("2222222222222222")
						console.log(res.data.data.goodsCates)
						this.navArrItem=res.data.data.goodsCates
						// //console.log("显示查询到的数据--- one")
						// //console.log(this.navArrItem)
					}
				})
			
			
			},
			// 点击相应群体后，查询对于商品数据
			clickNav2(index,id,cateTitle){
				console.log("2222222222222222")
				console.log(index)
				console.log(id)
				console.log(cateTitle)
				this.newsArr=[]
				uni.request({
					 //url:"http://localhost:8009/shop/mall-goods-list",
					url:"http://107.151.197.197:8009/shop/mall-goods-list",
					data:{
						cat_id:id
					},
					success:res=>{
						//console.log(res)
						//console.log("显示查询到的数据--- newsArr")
						//console.log(res.data)
						this.newsArr=[...this.newsArr,...res.data.data.list]
					}
				})
			},
			getIdeaData(){
				uni.request({
					// url:"http://localhost:8009/shop/mall-lists",
					url:"http://107.151.197.197:8009/shop/mall-lists",
					success:res=>{
						//console.log(res)
						//console.log("navArrItem--- one")
						//console.log(res.data)
						
					}
				})
			},
			
			// 点击 商品框
			goDetail(items){
				// uni.showToast({
				// 	title:"你好"+items.goodsName+"  id="+items.goodsId
				// })
				uni.navigateTo({
					url:'/pages/shop/shop_list/goods-detail?goodid='+items.goodsId
				})
			},
			
			
			// 点击搜索框
			toSearch(){
				uni.navigateTo({
					  //url:`/pages/detail/detail?cid=51&id=253`
					  url:`/pages/shop/index/index-seek`
				})
			}
		}
	}
</script>


<style lang="scss" scoped>
	.user-input {
		
	            width: 95%;
	            height: 40px;
				margin: 0 auto;
				// box-shadow: 2px 2px 2px 2px #c6c9cf;
	            //border: 2px solid #ffffff;
				background-color:#ffffff ;
	            border-radius: 5px;
	            box-sizing: border-box;
	            outline: none;
	            text-indent: 10px;
	        }
	// 导航栏样式
.navscroll{
	height: 210rpx;
	background: #F7F8FA;
	white-space: nowrap;
	position: fixed;
	top:var(--window-top);
	left:0;
	z-index: 10;
	/deep/ ::-webkit-scrollbar {
		width: 4px !important;
		height: 1px !important;
		overflow: auto !important;
		background: transparent !important;
		-webkit-appearance: auto !important;
		display: block;
	}
	.item{
		font-size: 32rpx;
		display: inline-block;
		line-height: 100rpx;
		padding:0 30rpx;
		color:#333;	
		margin-top: 10px;
		&.active{
			color:#c5353c;
		}
	}
}
.color{
	
	//background-color: #c8c7cc;
}
.navscroll2{
	margin-top: 120px;
	.item{
		font-size: 27rpx;
		// display: inline-block;
		line-height: 50rpx;
		text-align:center;
		color:#333;		
		image{
		// margin-left: 20px;
		height: 45px;
		width: 45px;
		border-radius: 80px;
	}
	}
}
.iocn_div{
	height: 500px;
	width: 80px;
	//background: #F7F8FA;
	margin-right: 5px;
	margin-left: 5px;
	border-radius: 5px;
}
.content{
	padding:0px;
	padding-top:180rpx;	
	
}
// .shop_row{
	
// 		// border-bottom:1px dotted #efefef;
// 		padding:10rpx 0;
// 	}
.nodata{
	display: flex;
	justify-content: center;
	image{
		width: 360rpx;
	}
}
.loading{
	text-align: center;
	font-size: 26rpx;
	//color:#565656;
	line-height: 2em;
}
</style>
